<template>
  <view class="main ">
    <u-navbar :is-back="true" title="储量变化趋势" :title-bold="true" title-color="#fff" back-icon-color="#fff"  :background="{ backgroundColor: 'rgb(61, 95, 255)' }"></u-navbar>

    <view class="revolveBox">
      <qiun-data-charts type="line" :eopts="eopts" :chartData="chartData" :echartsH5="true" :echartsApp="true"
        v-if="chartData" />
    </view>
  </view>
</template>
<script>
import PickerItem from "@/components/pickerItem/pickerItem.vue"
export default {
  components: { PickerItem },
  data () {
    return {
      searchData: {
        countyNo: "",
        customerName: "",
        pageSize: 20,
        pageNumber: 1,
      },
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      eopts: {
        title: {
          text: "万吨",
          textAlign: "center",
          top: "8%",
          right: "7%",
          rotate: -90,
          textStyle: {
            fontSize: 12,
          },
        },
        legend: {
          rotation: -90,
          left: "10%",
          top: "center",
          orient: "vertical",
          icon: "circle",
        },
        grid: {
          left: "35%",
          right: "70",
          top: "15%",
        },
        color: [
          "#0acf97",
          "#3d5fff",
          "#0EECF1",
          "#ffff00",
          "#ffa500",
          "#0000FF",
          "#C43CC4",
          "#9400d3",
          "#9f79ee",
          "#696969",
          "#ff00ff",
          "#bdb76b",
          "#006400",
          "#00bfff",
          "#66cd00",
          "#8b8989",
          "#ff1493",
        ],
        tooltip: {
          trigger: "axis",
          show: true,
          backgroundColor: "#ffffff",
          triggerOn: "mousemove|click",
          borderColor: "#288CFE",
          borderWidth: 1,
          padding: [5, 10],
          extraCssText:
            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);Opacity: 1;z-index:999;transform: rotate(90deg);",
          textStyle: {
            color: "#666666",
          },
        },
        xAxis: {
          type: "value", //数据
          position: "top", //x 轴的位置【top bottom】
          nameRotate: -90, //坐标轴名字旋转，角度值。
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            rotate: 90, //刻度标签旋转的角度，
          },
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
            },
          },
          // scale: true, //是否是脱离 0 值比例
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#666666",
            },
          },
          type: "category",
          inverse: "true", //是否是反向坐标轴。
          axisLabel: { rotate: -90 },
        },
        visualMap: [],
      },
    };
  },
  onLoad (options) {
    // this.searchData.customerName = options.customerNo
    // this.getServerData();
    this.chartData = JSON.parse(options.chartData)
  },
  methods: {
    getServerData () {
      const result ={
    "code": 200,
    "data": "",
    "sign": false,
    "body": [
        {
            "times": "2024-01",
            "month": "1月",
            "entryCount": 0,
            "trainPeopleCount": 0,
            "completedCount": 0
        },
        {
            "times": "2024-02",
            "month": "2月",
            "entryCount": 0,
            "trainPeopleCount": 0,
            "completedCount": 0
        },
        {
            "times": "2024-03",
            "month": "3月",
            "entryCount": 0,
            "trainPeopleCount": 0,
            "completedCount": 0
        }
    ]
}

      //this.$get(`/train/trainCompleteTrend?customerNo=${this.customerNo}`).then(result => {
        if (result.body) {
          const arr = result.body

          let res = {
            categories: arr.map(el => el.month),
            series: [
              {
                name: "入职人数",
                data: arr.map(el => el.entryCount)
              },
              {
                name: "参与培训人数",
                data: arr.map(el => el.trainPeopleCount)
              },
              {
                name: "达标人数",
                data: arr.map(el => el.completedCount)
              }
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }
      //})
    },
  }
};
</script>
<style lang="scss" scoped>
.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #F6F6F6;
}

.body-cont {
  box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
  border-radius: 12rpx;
  padding: 20rpx;

  h4 {
    color: #333;
    font-size: 30rpx;
  }
}

.charts-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 100%;
}

.revolveBox {
  width: 100%;
  height: 1360rpx;
  background-color: #fff;
  border-radius: 10rpx;
  position: relative;
  margin-top: 20rpx;
}

.chart-title {
  position: absolute;
  right: -350rpx;
  width: 770rpx;
  top: 50%;
  text-align: center;
  transform: rotate(90deg);
  font-weight: 700;
  color: #4565ff;
}
</style>